﻿/**
 * @author Basit (i@basit.me || http://Basit.me)
 * 
 * Online Quran Project
 * http://GlobalQuran.com/
 *
 * Copyright 2011, imegah.com
 * Simple Public License (Simple-2.0)
 * http://www.opensource.org/licenses/Simple-2.0
 * 
 */
@charset "utf-8";
/* 
Reset the style
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
body {
	line-height:1;
}
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}
ol, ul {
	list-style:none;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content:'';
	content:none;
}
/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article {
	display: block;
}
a {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}
mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}
del {
	text-decoration: line-through;
}
abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
	display: none;
}
input, select {
	vertical-align:middle;
}
/* end of reset styles */

/* Global styles */
:focus, :active, ::-moz-focus-inner {outline:none; border:0;}
* {
	outline: none;
	font-size:100%;
}
body {
	/* recommanded by http://awayback.com/revised-font-stack/
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif; */
	font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
	font-size:70%;
	color: #333;
}
.center {
  margin-left: auto;
  margin-right: auto;
}
.left {
	float:left;
}
.right {
	float:right;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clear {
	clear:both;
	display:block;
	overflow:hidden;
	visibility:hidden;
	height:0px;
}
.clearR {
	clear: right;
}
.clearL {
	clear: left;
}
.spacer {
	clear:both;
	height:1px;
	font-size:1px;
}
.hide, .saving_message {
	display:none;
}
.show {
	display: block;
}
.inline {
	display:-moz-inline-stack;
	display:inline-block;
  	*display:inline;
	vertical-align:top;
	zoom:1;
}
ul.inline li {
	padding:0;
	margin:0;
	margin-right: 2px;
	float: left;
}
.ltr {
	direction:ltr;
}
.rtl {
	direction:rtl;
}
.alignR {
	text-align:right;
}
.alignL {
	text-align:left;
}
.align_center {
	text-align:center;
}
.alignJ {
	text-align:justify;
}
.lighterLink {
	color: #6d84b4;
}
.lighter {
	color: #999;
}
.medium {
	color: #06103A;
}
.darker {
	color:#06103A;
}
.spotLight {
	color:#900;
}
a, .link {
	color:#3b5998;
	text-decoration: none;
}
a:hover, a:focus, .link:hover, .link:focus {
	text-decoration:underline;
}
a:active, a:visited {
}
a.static:hover, a.static:focus {
	text-decoration: none;
}
blockquote {
	margin:5px;
	padding:10px;
	color:#999;
	font-style:italic;
	line-height:1.3em;
	width:100%;
	quotes:none;
}
blockquote.left {
	border-right:1px dashed #ccc;
	width:35%;
} /* float blockquote left, and set width */
blockquote.right {
	border-left:1px dashed #ccc;
	width:35%;
} /* float blockquote right and set a width */
/* ** ** Header Styles ** ** */
h1, h2, h3, h4, h5, h6 {
	line-height:1.5em;
	font-weight: bold;
}
h1 {
	font-size: 170%;
}
h2 {
	font-size: 140%;
}
h3 {
	font-size: 120%;
}
h4 {
	font-size: 100%;
}
h5 {
	font-size: 95%;
}
h6 {
	font-size: 90%;
}
/* ** ** ul li's ** ** */
ul li {
	margin-left:20px;
}
img {
	float: left;
	margin-right: 8px;
}
img.inline {
	margin-right: 1px;
}
/* ** ** paragraph styling ** ** */
p {	
	line-height: 1.2em;
}
p img.left {
	float:left;
	margin:1.52em 1.52em 1.52em 0;
	padding:0;
}
p img.right {
	float:right;
	margin:1.52em 0 1.52em 1.52em;
}
/* ** ** forms ** ** */
form fieldset {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius:5px;
	padding-top:5px;
	padding-left:5px;
	border:1px solid #ccc;
}
form fieldset legend {
	padding:0 5px;
}
input[type="search"] {
	-webkit-appearance: textfield; /* force safari to treat search field as normal field */
}
input[type=search], input[type=text], input[type=email], input[type=url], input[type=password] {
	border:1px solid #ccc;	
	height: 22px;
	padding:0 2px 0 2px;
	margin:0;
	vertical-align: middle;
}
input.title {
	font-size: 150%;
}
/* ** ** custom select color ** ** */
::selection {
	background-color: #CCC; /* Safari */ /*TODO change color */
}
::-moz-selection {
	background-color: #CCC; /* Firefox */ /*TODO change color */
	color:#FFF;
}
strong, .strong {
	font-weight:bold;
}
em, dfn {
	font-style:italic;
}
dfn {
	font-weight:bold;
}
sup, sub {
	line-height:0;
}
abbr, acronym {
	border-bottom:1px dashed #ccc;
}
address {
	margin:0 0 1.5em;
	font-style:italic;
}
del {
	color:#666;
}
pre, code, tt {
	font-family:'andale mono', 'lucida console', monospace;
	display:block;
}
code {
	display:block;
	padding:0px 2px 4px 26px;
}
pre {
	margin:1.5em 0;
	white-space:pre;
}
caption {
	color: #999;
}
table tr {
	padding: 2px;	
}
table th {
	background-color: #eceff6;
	padding:4px 0 4px 0;
}
table th, table td {
	padding-right: 1em;	
}
.uiTextareaAutogrow {
	overflow-x: hidden;
	overflow-y: hidden;
}
.placeholder
{
  color: #aaa;
}
.error, .notice, .info, .success {
	padding: 4px;
	display:-moz-inline-stack;
	display:inline-block;
  	*display:inline;
	vertical-align:top;
	zoom:1;
}
.error {
	background-color:#ffebe8;
	border:#dd3c10 1px solid;
}
.notice {
	background-color:#eceff6;
	border:#d4dae8 1px solid;
}
.info {
	background-color:#fff9d7;
	border:#e2c822 1px solid;
}
.success {
	background-color:#f7f7f7;
	border:#cccccc 1px solid;
}
.loading .loadingIndicator {
	visibility:visible;
}
.loadingIndicator {
	visibility: hidden;
	position:absolute;
	width: 16px;
	height: 11px;
	background-image:url(../ajax-loader.gif);
	text-indent:-9000px;
	overflow:hidden;
	outline:none;	
}
.rnd {
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
}
.rndC {
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.rndL {
	-webkit-border-top-left-radius: .3em;
	-webkit-border-bottom-left-radius: .3em;
	-moz-border-radius-topleft: .3em;
	-moz-border-radius-bottomleft: .3em;
	border-top-left-radius: .3em;
	border-bottom-left-radius: .3em;
}
.rndR {
	-webkit-border-top-right-radius: .3em;
	-webkit-border-bottom-right-radius: .3em;
	-moz-border-radius-topright: .3em;
	-moz-border-radius-bottomright: .3em;
	border-top-right-radius: .3em;
	border-bottom-right-radius: .3em;
}
	.rtl .rndL {
		-webkit-border-top-right-radius: .3em;
		-webkit-border-bottom-right-radius: .3em;
		-moz-border-radius-topright: .3em;
		-moz-border-radius-bottomright: .3em;
		border-top-right-radius: .3em;
		border-bottom-right-radius: .3em;
		-webkit-border-top-left-radius: 0px;
		-webkit-border-bottom-left-radius: 0px;
		-moz-border-radius-topleft: 0px;
		-moz-border-radius-bottomleft: 0px;
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
	}
	.rtl .rndR {
		-webkit-border-top-left-radius: .3em;
		-webkit-border-bottom-left-radius: .3em;
		-moz-border-radius-topleft: .3em;
		-moz-border-radius-bottomleft: .3em;
		border-top-left-radius: .3em;
		border-bottom-left-radius: .3em;
		-webkit-border-top-right-radius: 0px;
		-webkit-border-bottom-right-radius: 0px;
		-moz-border-radius-topright: 0px;
		-moz-border-radius-bottomright: 0px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
	}
.sdw {	
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
	box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee')";
	/* For IE 5.5 – 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee');
}
.bd {
	border:#F7F7F7 1px solid;
}
.icon {
	width: 16px;
	height: 16px;
	background: transparent url(../sprites.png) no-repeat 0 0;
	-background-image:url(../sprites-8.png); /* ie6 fix */
	text-indent:-7000px;
	overflow:hidden;
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	 /* for ie6+ */
    *text-indent: 0;
    *font-size: 0px !important; /* ie fix, for showing extra padding */
    *line-height: 0;
}
.icon:hover, .icon:focus {
	text-decoration:none;
}
body  .gq {
	display:none !important;
}
.gq .gq {
	display: inherit !important;
}
noscript p { 
	margin: 10px; 
	padding: 10px; 
	border: 1px solid #cc3; 
	background: #ff9;
	font-size: 200%;
	font-weight: bold; 
}
#gqMain {
	width: 98%;
	margin: 0 auto;
	/*background-color: #FFF;*/
	min-height: 100%;
	height: 100%;
	clear: both;
}
#globalHeader {
	height:20px;	
	clear:both;
}
	#gqMain .sticky {
	}
	#gqMain .sticky #topNav {
		position:fixed;
		top:0;
		/* ie6 fix, Thanks to Achernar http://www.webmasterworld.com/css/3592524.htm */
		-position: absolute; 
		-margin-left:14px;
 		-top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
		-left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
	}
	#gqMain .sticky .logo {
	}
#topNav {
	width:98%;
	clear:both;
	position:absolute;
	overflow:visible;
	-width:100%; /* ie6 fix */
	*height:200px; /* ie7 fix, if drop menu extend, you have to extend the height also, caution: ayah content, surah links/buttons wont work, if put height too much TODO FIXME*/
	*overflow-y:visible; /* ie7 fix */
	*overflow-x:hidden;	
}
	#topNav ul {
		position:relative;
		margin: 6px 3px;
		padding:0;
	}
	#topNav ul ul {
		display:none;
		min-height: 100%;
		top:24px;
		padding:6px;
		position:absolute;
				
		/* shadow, border, background */
		-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
		-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
		box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
		/* For IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee')";
		/* For IE 5.5 – 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee');
		border-top-width:0px;
		border-right:#F7F7F7 1px solid;
		border-bottom:#F7F7F7 1px solid;
		border-left:#F7F7F7 1px solid;
		/*background-color:#FFF;*/
		z-index:1;
	}
	.rtl #topNav ul ul {		
	}
	#topNav ul ul.active {
		display:block;
	}
	#topNav ul ul li {
		display:block;
	}
	#topNav ul li {
		display:inline;		
		padding: 0px;
		margin: 0px;
	}
	#topNav ul li a {
		margin: 0px 3px 0px 3px;
	}
	#topNav ul .dropOption .dropLink {
		height: 36px;
		line-height: 36px;
		margin: -6px 3px;
		vertical-align: middle;
		text-decoration:none;
		display: inline-block;
		*display:inline;
		zoom:1;
		cursor: pointer;
	}
	.dropLink.active, .dropLink:hover, .dropLink:focus, .dropLink:visited, .dropLink:active {
		text-decoration:none;
	}
	#topNav ul .dropOption .dropLink span, #topNav ul .dropOption .dropLink .icon {
		margin-top: 6px;
	}
	#topNav .recitor {
		margin-top: -2px;
	}
	#topNav #prevPage a, #topNav #nextPage a {
		margin:0;
	}
	#topNav #prevPage a {
		margin-right:-4px;		
	}
	.rtl #topNav #prevPage a {
		margin-right:0px;
		margin-left:-4px;
	}
	#playerNavBox {
		height:36px;
		margin-right: 260px;
		/* shadow, border, background */
		-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
		-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
		box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
		/* For IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee')";
		/* For IE 5.5 – 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee');
		border:#F7F7F7 1px solid;
		background-color:#FFF;
	}
		.rtl #playerNavBox {
			margin-right:0px;
			margin-left: 260px;	
		}
		.smallFrame #playerNavBox {
			margin-right: 2px;
		}
		.rtl.smallFrame #playerNavBox {
			margin-right: 0px;
			margin-left: 2px;
		}
		.rtl #playerNav {
			*position:static; /* ie6+ fix */
		}
		#pageNav {
			float: right;
			z-index: 1;
		}
		.rtl #pageNav {
			float:left;
		}	
		.pageOn, .totalPages, .bold {
			font-size:120%;
			font-weight:bold;
			margin-left: 3px;
			margin-right: 6px;
		}
		.currentAyah, .sep {
			font-size:120%;
			font-weight:bold;
			margin-left: 2px;
			margin-right: 2px;
		}
		.recitorList {
			display:block;
			width: 420px;
		}
		.rtl .recitorList {
			position:absolute;
			right: 0;	
		}
			.recitorList li {
				float:left;
			}
			.recitorList a {
				cursor:pointer;
				display:block;
				min-width:120px;
				-width: 120px;
				height:20px;
				line-height: 1.5em;
				vertical-align: middle;			
				padding-left: 4px;
				padding-right: 4px;
				overflow:hidden;
			}
			.recitorList a:hover {
				background-color:#F2F2F2;
				text-decoration: none;
			}
			.recitorList a:focus {
				text-decoration: none;
			}
			.recitorList .txt {
				color: #333;
			}
			.recitorList a.active, .recitorList a.active:hover, .recitorList a.active:focus, .recitorList a.active:visited, .recitorList a.active:active {
				background-color: #F2F2F2;
				font-weight:bold;
			}
		.bandwidthList a {
			cursor:pointer;
			display:block;
			-width: 60px;
			height:20px;
			line-height: 1.5em;
			vertical-align: middle;			
			padding-left: 4px;
			padding-right: 4px;
			overflow:hidden;
		}
			.bandwidthList a:hover {
				background-color:#F2F2F2;
				text-decoration: none;
			}
			.bandwidthList a:focus {
				text-decoration: none;
			}
			.bandwidthList .txt {
				color: #333;
			}
			.bandwidthList a.active, .bandwidthList a.active:hover, .bandwidthList a.active:focus, .recitorList a.active:visited, .bandwidthList a.active:active {
				background-color: #F2F2F2;
				font-weight:bold;
			}
		.repeatOptions {
			
		}
			.repeatOptions li {
				height: 30px;
				white-space:nowrap;
			}
			.repeatOptions label {
				display:inline-block;
				width:70px;
			}
	#searchInfoBox {
		height:36px;
		margin-right: 260px;
		/* shadow, border, background */
		-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
		-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
		box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
		/* For IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee')";
		/* For IE 5.5 – 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee');
		border:#F7F7F7 1px solid;
		background-color:#FFF;
	}
		.rtl #searchInfoBox {
			margin-right:0px;
			margin-left: 260px;	
		}
		.smallFrame #searchInfoBox {
			margin-right: 2px;
		}
		.rtl.smallFrame #searchInfoBox {
			margin-right: 0px;
			margin-left: 2px;
		}
		#searchInfoBox li {
			line-height:20px;
		}
		.rtl #searchInfo {
			*position:static; /* ie6+ fix */
		}
		#searchNav {
			float: right;
			z-index: 1;
		}
		.rtl #searchNav {
			float:left;
		}		
	#statusNav {
		margin-top:-40px;	
		width: 230px;
		height:36px;
		float: right;
		overflow:inherit;
		/* shadow, border, background */
		-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
		-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
		box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
		/* For IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee')";
		/* For IE 5.5 – 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee');
		border:#F7F7F7 1px solid;
		background-color:#FFF;
		clear: both;
	}
	.rtl #statusNav {
		float:left;
	}
		.smallFrame #statusNav {
			margin-top:0px;	
		}
		#statusNav ul {
			float:right;
			margin-top: 10px;
			display:inline;
		}
		.rtl #statusNav ul {
			float: left;
		}
		#statusNav ul ul {
			float:none;
			width: 218px;
			margin-top:0px;
			right: -7px;
			*right: -14px;			
		}
		.rtl #statusNav ul ul  {
			right:auto;
			left: -7px;
			*left: 0px;
			-margin-top:-6px;
		}		
			#statusNav ul ul span {
				display:block;
				margin-bottom:10px;
			}
			#statusNav ul ul label {
				display:block;
				margin-bottom: 4px;
			}
			#statusNav ul ul input {
				width: 98%;
				margin-bottom: 10px;
			}
			#statusNav ul .dropOption {
				width: 200px;	
			}
			#statusNav ul .dropOption .dropLink {
				height: 36px;
				line-height: 32px;
				margin: -6px 3px;
			}
			#statusNav ul .dropOption .dropLink:hover {
				text-decoration:underline;
			}
			#statusNav .currentAyah {
				position:relative;
				display:inline-block;
				float: left;
				margin-top: 10px;
				margin-left: 10px;
			}
			.rtl #statusNav .currentAyah {
				float: right;
			}
			.linkShare label {
				font-weight:bold;
			}
			#statusNav ul #share li {
				display: inline;
				margin-left: 10px;
				vertical-align:top;
			}
			#statusNav ul #share .fbLike {
				display:block;
				margin-top: 8px;
			}
			.addthis_toolbox.addthis_default_style {
				display:inline !important;
			}
	#messageBox {
		display:table-cell;	
		float: left;
		margin-top: 6px;
		padding: 6px;
		background-color:#FFF;
	}
	.rtl #messageBox {
		float: right;
	}
		.smallFrame #messageBox {
			width: 50%;
		}
	#searchBox {
		display:table-cell;
		float: right;
		margin-right: 255px;
		-margin-right: 127px; /* ie6 fix */
	}
	.rtl #searchBox {
		float: left;
		margin-right:0px;
		margin-left: 255px;
		-margin-left: 127px; /* ie6 fix */
	}
		.smallFrame #searchBox {
			background-color:#FFF;
			margin-right: 0px;
			margin-top:-15px;
			clear: both;
			/* shadow, border, background */
			-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
			-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
			box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
			/* For IE 8 */
			-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee')";
			/* For IE 5.5 – 7 */
			filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee');
			border:#F7F7F7 1px solid;
			border-top-width:0px;
			background-color:#FFF;
		}
		#searchBox #search {
			width: 220px;
			height: 22px;
			margin: 10px 4px;
			border: #cccccc 1px solid;
		}
			.smallFrame #searchBox #search {
				width:217px;
			}
		#searchBox .searchTips {
			display:block;
			margin-left: 210px;
			margin-top: -8px;
		}
			.smallFrame #searchBox .searchTips {
				display:none;
			}
		.rtl #searchBox .searchTips {
			margin-left:0px;
			margin-right: 210px;
		}
		#searchBox #searchSubmit {
			display:none;
		}
		#searchBox #searchSubmit.show {
			display:block;
		}
	#surahBox {
		display:table-cell;
		float: right;
		clear:right;
		width: 230px;
		margin-top:-43px;
		overflow:hidden;
		background-color:#FFF;
	}
	.rtl #surahBox {
		float: left;
		clear: left;
	}
		.smallFrame #surahBox {
			margin-top: -10px;
			/* shadow, border, background */
			-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
			-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
			box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
			/* For IE 8 */
			-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee')";
			/* For IE 5.5 – 7 */
			filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee');
			border:#F7F7F7 1px solid;
			border-top-width:0px;
			background-color:#FFF;
		}
		#surahBox #surah {
			width: 220px;
			height: 22px;
			margin: 10px 4px;
			border: #cccccc 1px solid;
		}
		#surahBox #surahSubmit {
			display:none;
		}
		#surahBox #surahSubmit.show {
			display:block;
		}
	#extraTools {
		width: 220px;	
		float: right;
		clear:right;
		margin-top:-11px;
		background-color:#FFF;
	}
	.rtl #extraTools {
		float: left;
		clear: left;
	}
		.smallFrame #extraTools {
			width: 230px;
			margin-top: -10px;
			/* shadow, border, background */
			-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
			-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
			box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
			/* For IE 8 */
			-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee')";
			/* For IE 5.5 – 7 */
			filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee');
			border:#F7F7F7 1px solid;
			border-top-width:0px;
			background-color:#FFF;
		}
	#extraTools ul {
		float: right;
	}
	.rtl #extraTools ul {
		float: left;
	}
		#extraTools ul li a {
			margin: 0px 1px 0px 1px;
		}
	#extraTools .sideLink
	{
		display:none;
	}
	#extraTools .sideLink.active {
		display:block;
		-display:inline;
	}
	.ltr #extraTools .sideLink {
		float:left;
		margin-top: 6px;
	}
	.rtl #extraTools .sideLink {
		float:right;
		margin-top: 6px;
	}
	#extraTools .on {
		display: none;
	}
	#extraTools .active .on {
		display: inline;
	}
	#extraTools .active .off {
		display: none;
	}
#gqContent {
	min-height:600px;
	display:table;	
	padding: 16px 0px 16px 0px;
	padding-top:0px;
	clear: both;
}
#infoSidebar {
	display:table-cell;
	width: 210px;
	margin-top: 0px;
	-margin-top:0px;
	float:right;
	overflow:hidden;
}
.rtl #infoSidebar {
	float:left;
}
	.smallFrame #infoSidebar {
		width:220px;
		position: absolute;
		/*background-color: #FFF;*/
		margin-top:90px;
		border-left:#3B5998 thick solid;
		
		padding-left:1em;
		z-index:0;
	}
		.ltr .smallFrame #infoSidebar {
			right: 0;		
		}
		.rtl .smallFrame #infoSidebar {
			border-left:#3B5998 0px solid;
			padding-left:0px;
			border-right:#3B5998 thick solid;
			padding-right:1em;
		}
	#infoSidebar.hide {
		display:none;
	}
	#infoSidebar .headerTitle {
		height: 20px;
		padding: 3px 6px 0px 0px;
	}
		#infoSidebar .headerTitle h3, #infoSidebar .headerTitle h4 {
			float: left;
		}
		.rtl #infoSidebar .headerTitle h3, .rtl #infoSidebar .headerTitle h4 {
			float: right;
		}
		#infoSidebar .headerTitle .sideLink {
			line-height: 1.4em;
			float: right;
		}
		.rtl #infoSidebar .headerTitle .sideLink {
			float: left;
		}
	#infoSidebar input {
		margin-top: 2px;
		width: 95%;	
	}
	#infoSidebar button {
		margin: 2px;
	}
	#infoSidebar div {
		padding-left:4px;
		margin-top:6px;
	}
	.sideNav {
		clear:both;
		margin:0;
		padding:0;		
		margin-bottom:1em;
		padding-bottom:1em;
		border-bottom:#F4F4F4 1px solid;
	}
		.sideNav li {
			margin-left:0;		
		}
		.rtl .sideNav li {
			
		}
		.sideNav li li a {
			padding-left: 2em;
		}
		.sideNav ul {
			display: none;
		}
		.sideNav .active ul {
			display:block;
		}
		.sideNav a {
			cursor:pointer;
			display:block;
			height:20px;
			line-height: 1.5em;
			vertical-align: middle;			
			padding-left: 1em;
		}
		.sideNav a:hover, .sideNav a:focus {
			background-color:#F2F2F2;
			text-decoration: none;
		}
		.sideNav .txt {
			color: #333;
		}
		.sideNav .txt, .sideNav .link {
			float:left;
			margin-top: 2px;
		}
		.sideNav a.active, .sideNav a.active:hover, .sideNav a.focus, .sideNav a.active:visited, .sideNav a.active:active {
			background-color: #d4dae8;
			font-weight:bold;
		}
		.sideNav .more .txt, .sideNav .less .txt {
			color:#3b5998;
		}
		.sideNav .loading {
			 /* ie6 fix conflict with facebook api */
			-position:relative;
			-background-image:none;
		}
		.sideNav .loading .countValue, .sideNav .loading .sideInfo {
			display:none;
		}
		.sideNav .loadingIndicator {
			position: relative;
			float: right;
			margin-top: 4px;
			margin-right:4px;
		}
		.sideNav .countValue {
			width: 20px;
			color: #3b5998;
			font-weight:bold;
			text-align:center;
			background-color:#d4dae8;
			float:right;
			margin-top: 2px;
			margin-right:6px;
		}
		.sideNav .sideInfo {
			color: #3b5998;
			font-weight:bold;
			text-align:center;
			float:right;
			margin-right:6px;
		}
		.sideHelpLinks li {
			height:20px;
			margin:0;
			padding:0;
		}
		#quranSettings {
			margin-bottom: 1em;
			padding: 4px;
			/* shadow, border, background */
			-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
			-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
			box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
			/* For IE 8 */
			-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee')";
			/* For IE 5.5 – 7 */
			filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee');
			border:#F7F7F7 1px solid;
			background-color:#F5F5F5;	
		}
			#quranSettings label {
				display:block;
				margin-top: 1em;
				margin-bottom: 4px;	
			}
			#quranSettings input {
				width:auto;	
			}
			#quranSettings .closeButton {
				float:right;
			}
			.rtl #quranSettings .closeButton {
				float:left;
			}
#quranContentArea {
	padding-top: 0px;
	margin-left: 4px;
	text-align:center;
}
	.smallFrame #quranContentArea {
		margin-top:0px;
	}
	#gqContent .contentFull {
		/*width: 100%;*/
	}
	#gqContent .contentHalfSidebar {
		margin-right: 0px;
	}
	.rtl #gqContent .contentHalfSidebar {
		margin-right: 4px;
		margin-left: 0px;	
	}
	#gqContent .smaller {
		font-size:120%;
	}
	#gqContent .small {
		font-size:150%;
	}
	#gqContent .medium {
		font-size:200%;
	}
	#gqContent .large {
		font-size:250%;	
	}
	#gqContent .larger {
		font-size:300%;
	}
	#gqContent .larger-x {
		font-size:400%;
	}
	#gqContent .larger-xx {
		font-size:500%;
	}
		/* quran shows smaller font, make them bigger then normal size */
		#gqContent .smaller .quranText {
			font-size:80%;
		}
		#gqContent .small .quranText  {
			font-size:110%;
		}
		#gqContent .medium .quranText {
			font-size:130%;
			font-weight: bold;
		}
		#gqContent .large .quranText  {
			font-size:135%;	
		}
		#gqContent .larger .quranText  {
			font-size:140%;
		}
		#gqContent .larger-x .quranText  {
			font-size:145%;
		}
		#gqContent .larger-xx .quranText  {
			font-size:150%;
		}
	#gqContent .bismillah {
		display: none;
		margin:auto;
		margin-bottom: 1em;
	}
	
	.surahTitle {		
		height:auto;		
		margin:auto;
		margin-top:1em;
		margin-bottom: 1em;
		padding-top: 5px;
		padding-bottom: 5px;
		display:-moz-inline-stack;
		display:inline-block;
		zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
		*display: inline;
		/* shadow, border, background */
		-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
		-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
		box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
		/* For IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee')";
		/* For IE 5.5 – 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee');
		border:#F7F7F7 1px solid;
		background-color:#FFF;
	}
	.surahTitle .title {
		padding-left:1em;
		padding-right:1em;
		color: #06103A;
		display:-moz-inline-stack;
		display:inline-block;
		zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
		*display: inline;
		font-weight:bold;
	    font-size: 15px;
	}
	.ayahs {
		
	}
	.ayahs.ltr, .ayahs .ltr {
		text-align:left;
	}
	.ayahs.rtl, .ayahs .rtl {
		text-align:right;
	}
	.ayahs .ayah:hover, .ayahs .group:hover, .ayahs .mouseOver {
		background-color: #ffffee;	
	}
	.ayahs .selected, .ayahs .selected:hover {
		background-color: #f9fbff;
	}
	.single .ayah, .book .ayah {
		text-align:justify;
		display:inline;
		line-height: 1.5em;		
	}
	.single .ayahs, .book .ayahs {
		padding: .5em .2em .5em .3em;	
	}
	.book .colume {
		width: 49%;
		float: right;
		margin-left: 4px;
		margin-right: 4px;
	}
	.group {
		padding: .5em .2em .5em .3em;
	}
	.group .ayah {
		margin-bottom: 12px;
		padding: 4px;
	}
	.ltr .group .ayah {
		margin-left: 90px;
	}
	.rtl .group .ayah {
		margin-right:90px;
	}
	.ltr .ayahs .group .ayahNumber {
		float: left;
		color:#999;
		font-weight: bold;
	}
	.rtl .ayahs .group .ayahNumber {
		float: right;
		color:#999;
		font-weight: bold;
	}
	.ltr .ltr .foundin, .ltr .rtl .foundin, .foundin {
		text-align:left;
		font-size:60%;
		color:#999;
		margin-top:.5em;
		margin-bottom:.5em;
	}
		.rtl .ltr .foundin, .ltr .rtl .foundin {
			text-align:right;
		}
		.foundin .active {
			border-bottom:#999 1px dotted;
		}
		.foundin a, .foundin a:active, .foundin a:focus, .foundin a:visited {
			color:#999;
		}
		.foundin a:hover, .foundin .showAll, .foundin .hideAll {
			color:#6699cc !important;
		}
		.foundin .showAll, .foundin .hideAll {
			font-weight: bold;
		}
	a.quranID {
		width: 100px;
		display:block;
		font-size:70%;
		line-height:normal;
		color:#6699cc;
		white-space: nowrap;
	}
	.word {
		margin-left: 8px;
		margin-right: 8px;
		display:-moz-inline-stack;
		display:inline-block;
		zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
		*display: inline;
	}
	.staticWord {
		padding: .2em .3em .2em .3em;
	}
	.staticWord .first, .staticWord .second {
		text-align: center;
	}
	.staticWord:hover {
		background-color:#ffffee;
	}
	.word .first {
		display:block;
		padding-top: .2em;
		padding-bottom: .2em;
	}
	.word .second {
		display: block;	
	}
	.word .tipsWord:hover {
		cursor:help;
		color: #3B5998;
		text-decoration:overline;
	}
	.en .second {
		font-size: 20%;
	}
	
#result {
	height:auto;		
	margin:auto;
	margin-top:1em;
	margin-bottom: 1em;
	padding: 10px;
	display:-moz-inline-stack;
	display:inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	/* shadow, border, background */
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
	box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee')";
	/* For IE 5.5 – 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee');
	border:#F7F7F7 1px solid;
	background-color:#FFF;
}
	
.tajweedQuickHelp {
	clear:both;
}
	.rtl .tajweedQuickHelp {
		float: right;
	}
	.tajweedQuickHelp li {
		padding:0;
		margin:0;
		margin-right: 1em;
		float:left;
	}
	.tajweedQuickHelp .color {
		height: 11px;
		width: 11px;
		margin:2px;
		display:-moz-inline-stack;
		display:inline-block;
		*display:inline;
		vertical-align:middle;
		zoom:1;
	}
#globalFooter {
	line-height: 1.5em;
	padding: 1em .5em 2em .5em;
	clear: both;
	text-align:center;
}
	#globalFooter div {
		margin:3px;
		display:-moz-inline-stack;
		display:inline-block;
		*display:inline;
		vertical-align:middle;
		zoom:1;
	}
	#globalFooter .copyright, #globalFooter .globalLanguage {
		float: left;	
	}
	.rtl #globalFooter .copyright, .rtl #globalFooter .globalLanguage {
		float: right;
	}
	.rtl #globalFooter .globalLanguage {
		direction:ltr;
	}
	#globalFooter li {
		padding:0;
		margin:0;
		margin-right: 1em;
		float: left;
	}
	#globalFooter .nav {
		float:right;
	}
	.rtl #globalFooter .nav {
		float:left;
	}
		.smallFrame #globalFooter .nav {
			display:none;
		}
	#globalFooter .twitter-follow-button {
		width:68px !important;
	}
	#globalFooter .supportMsg {
		display: none;
	}
	.gq #globalFooter .supportMsg {
		display:block;
	}
	.gq #globalFooter .socialLike {
		position:absolute;
		top: 0;
	}
	.ltr.gq #globalFooter .socialLike {
		right: 2px;
		-display: none; /* ie6 fix */
	}
	.rtl.gq #globalFooter .socialLike {
		left: 2px;
	}

.logoBox {
	margin-top:1em;
}
.logo {
	width: 125px;
	height: 125px;	
}
.gq .logo {
	width: 145px;
}
.bismillah {
    display: none;
	width: 300px;
	height:62px;
	background-position:-162px -22px;
}
.play {
	background-position:0px -128px;
}
.play:hover, .play:focus {
	background-position:-16px -128px;
}
.play:active {
	background-position:-32px -128px;
}
.pause {
	background-position:-48px -128px;	
}
.pause:hover, .pause:focus {
	background-position:-64px -128px;
}
.pause:active {
	background-position:-80px -128px;
}
.prevAyah {
	background-position:-96px -128px;	
}
.prevAyah:hover, .prevAyah:focus {
	background-position:-112px -128px;
}
.prevAyah:active {
	background-position:-128px -128px;
}
.nextAyah {
	background-position:-144px -128px;	
}
.nextAyah:hover, .nextAyah:focus {
	background-position:-160px -128px;
}
.nextAyah:active {
	background-position:-176px -128px;
}
	.rtl .prevAyah {
		background-position:-144px -128px;
	}
	.rtl .prevAyah:hover, .rtl .prevAyah:focus {
		background-position:-160px -128px;
	}
	.rtl .prevAyah:active {
		background-position:-176px -128px;
	}
	.rtl .nextAyah {
		background-position:-96px -128px;	
	}
	.rtl .nextAyah:hover, .rtl .nextAyah:focus {
		background-position:-112px -128px;
	}
	.rtl .nextAyah:active {
		background-position:-128px -128px;
	}
.volume, .volume.full {
	background-position:-192px -128px;	
}
.volume.med {
	background-position:-208px -128px;	
}
.volume.low {
	background-position:-224px -128px;	
}
.volume.muted {
	background-position:-240px -128px;	
}
.repeat {
	background-position:-256px -128px;
}
.repeat:hover, .repeat:focus {
	background-position:-272px -128px;
}
#repeat .active {
	background-position:-288px -128px;
}
.zoomOUT {
	background-position:-16px -144px;
}
.zoomOUT:hover, .zoomOUT:focus {
	background-position:-32px -144px;
}
.zoomOUT .zoomOUT.disable, .zoomOUT .zoomOUT.disable:hover, .zoomOUT .zoomOUT.disable:focus {
	background-position: 0px -144px;
	cursor:default;
}
.zoomIN {
	background-position:-64px -144px;
}
.zoomIN:hover, .zoomIN:focus {
	background-position:-80px -144px;
}
.zoomIN .zoomIN.disable, .zoomIN .zoomIN.disable:hover, .zoomIN .zoomIN.focus {
	background-position:-48px -144px;
	cursor:default;
}
.arrowDown {
	width:7px;
	height: 7px;
	background-position:-100px -151px;
}
.prevPage {
	background-position:-112px -144px;
}
.nextPage {
	background-position:-128px -144px;
}
#prevPage .disable .prevPage {
	background-position:-144px -144px;
	cursor:default;
}
#nextPage .disable .nextPage {
	background-position:-160px -144px;
	cursor:default;
}
	.rtl .prevPage {
		background-position:-128px -144px;
	}
	.rtl .nextPage {
		background-position:-112px -144px;
	}
	.rtl #prevPage .disable .prevPage {
		background-position:-144px -144px;
	}
	.rtl #nextPage .disable .nextPage {
		background-position:-160px -144px;
	}
#prevPage .button, #nextPage .button {
	padding: .2em .3em .2em .3em;
	*padding-top: .1em;
}
.prevPage .disable, .nextPage .disable, .prevPage .disable:hover, .nextPage .disable:hover { /* button */
	color:#F4F4F4;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#F4F4F4));
	background: -moz-linear-gradient(top, #fff, #F4F4F4);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F4F4F4');
}
.prevSurah {
	background-position:-144px -144px;
}
.nextSurah {
	background-position:-160px -144px;
}
.arrowLeft3 {
	background-position:-176px -144px;
}
.arrowRight3 {
	background-position:-192px -144px;
}
	.rtl .prevSurah {
		background-position:-160px -144px;
	}
	.rtl .nextSurah {
		background-position:-144px -144px;
	}
	.rtl .arrowLeft3 {
		background-position:-192px -144px;
	}
	.rtl .arrowRight3 {
		background-position:-176px -144px;
	}
.fullScreen {
	background-position:-208px -144px;
}
.fullScreen:hover, .fullScreen:focus {
	background-position:-224px -144px;
}
.fullScreen .active {
	background-position:-240px -144px;
}
.fullScreen .active:hover, .fullScreen .active:focus {
	background-position:-256px -144px;
}
.close {
	width: 15px;
	height: 15px;
	background-position:-272px -145px;
}
.close:hover, .close:focus {
	background-position:-320px -145px;
}
.close.small {
	height: 11px;
	width: 11px;
	margin-top:1px;
	background-position:-336px -149px;
}
.close.small:hover, .close.small:focus {
	background-position:-369px -149px;
}
.book {
	background-position:-383px -144px;
}
.book .active {
	background-position:-399px -144px;
}
.tajweed {
	background-position:-416px -144px;
}
.kidsWordByWord {
	background-position:-432px -144px;
}
.keyboard {
	width: 20px;
	background-position:-448px -144px;
}
.recitor {
	width: 23px;
	height:22px;
	background-position:0px -160px;	
}
.recitor:hover, .recitor:focus, #recitor .active {
	background-position:-23px -160px;
}
#recitor .click {
	background-position:-46px -160px;
}
.ltr .leftBracket, #quranContentArea .ltr .leftBracket {
	height:22px;
	background-position:-80px -160px;
}
.ltr .rightBracket, #quranContentArea .ltr .rightBracket {
	height:22px;
	background-position:-96px -160px;	
}
	.rtl .leftBracket, #quranContentArea .rtl .leftBracket {
		height:22px;
		background-position:-96px -160px;	
	}
	.rtl .rightBracket, #quranContentArea .rtl .rightBracket {
		height:22px;
		background-position:-80px -160px;
	}
div.hr {
	width: 80%;
	height: 8px;
	margin:auto;
	margin-bottom:-7px;
	background: transparent url(../hr-line.png) no-repeat scroll center;
	-background-image:url(../hr-line-8.png); /* ie6 fix */
	 display: none;
}
div.hr hr {
	margin:0px;
	display: none;
}


/* button ---------------------------------------------- */
button, .button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	line-height:normal !important;
	font-size: 100%;
	font-weight:bold;
	padding: .2em .5em .3em .5em;
	white-space:nowrap;
}
button::-moz-focus-inner { /*Remove button padding in FF*/
    border: none;
    padding: 0;
	margin:0;
}
	button:hover, .button:hover, .button:focus, .button:active, .button:visited, .button:link {
		text-decoration: none;
	}
	button:active, .button:active {
		position: relative;
		top: 1px;
	}	
	button.big, .button.big {
		font-size: 180%;
		padding: .4em .5em .4em;
	}
	button.small, .button.small {
		font-size: 11px;
		padding: .2em .5em .2em;
	}
	/* color styles 
		---------------------------------------------- */
	/* white and default */
	button, .button {
		color: #333;
		border: solid 1px #999;
		background: #FFF;
		background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
		background: -moz-linear-gradient(top, #fff, #ededed);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
	}
	button:hover, .button:hover {
		background: #ededed;
		background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
		background: -moz-linear-gradient(top, #fff, #dcdcdc);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
	}
	button:active, .button:active {
		color: #999;
		background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
		background: -moz-linear-gradient(top, #ededed, #fff);
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
	}
	/* black */
	.black {
		color: #d7d7d7;
		border: solid 1px #333;
		background: #333;
		background: -webkit-gradient(linear, left top, left bottom, from(#06103A), to(#000));
		background: -moz-linear-gradient(top, #06103A, #000);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
	}
	.black:hover {
		background: #000;
		background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
		background: -moz-linear-gradient(top, #444, #000);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
	}
	.black:active {
		color: #06103A;
		background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
		background: -moz-linear-gradient(top, #000, #444);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
	}
	/* gray */
	.gray {
		color: #e9e9e9;
		border: solid 1px #555;
		background: #6e6e6e;
		background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
		background: -moz-linear-gradient(top, #888, #575757);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
	}
	.gray:hover {
		background: #616161;
		background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
		background: -moz-linear-gradient(top, #757575, #4b4b4b);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
	}
	.gray:active {
		color: #afafaf;
		background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
		background: -moz-linear-gradient(top, #575757, #888);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
	}
	/* orange */
	.orange {
		color: #fef4e9;
		border: solid 1px #da7c0c;
		background: #f78d1d;
		background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
		background: -moz-linear-gradient(top, #faa51a, #f47a20);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
	}
	.orange:hover {
		background: #f47c20;
		background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
		background: -moz-linear-gradient(top, #f88e11, #f06015);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
	}
	.orange:active {
		color: #fcd3a5;
		background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
		background: -moz-linear-gradient(top, #f47a20, #faa51a);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
	}
	/* red */
	.red {
		color: #faddde;
		border: solid 1px #980c10;
		background: #d81b21;
		background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
		background: -moz-linear-gradient(top, #ed1c24, #aa1317);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
	}
	.red:hover {
		background: #b61318;
		background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
		background: -moz-linear-gradient(top, #c9151b, #a11115);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
	}
	.red:active {
		color: #de898c;
		background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
		background: -moz-linear-gradient(top, #aa1317, #ed1c24);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
	}
	/* blue */
	.blue {
		color: #d9eef7;
		border: solid 1px #0076a3;
		background: #0095cd;
		background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
		background: -moz-linear-gradient(top, #00adee, #0078a5);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
	}
	.blue:hover {
		background: #007ead;
		background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
		background: -moz-linear-gradient(top, #0095cc, #00678e);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
	}
	.blue:active {
		color: #80bed6;
		background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
		background: -moz-linear-gradient(top, #0078a5, #00adee);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
	}
	/* rosy */
	.rosy {
		color: #fae7e9;
		border: solid 1px #b73948;
		background: #da5867;
		background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
		background: -moz-linear-gradient(top, #f16c7c, #bf404f);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
	}
	.rosy:hover {
		background: #ba4b58;
		background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
		background: -moz-linear-gradient(top, #cf5d6a, #a53845);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
	}
	.rosy:active {
		color: #dca4ab;
		background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
		background: -moz-linear-gradient(top, #bf404f, #f16c7c);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
	}
	/* green */
	.green {
		color: #e8f0de;
		border: solid 1px #538312;
		background: #64991e;
		background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
		background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
	}
	.green:hover {
		background: #538018;
		background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
		background: -moz-linear-gradient(top, #6b9d28, #436b0c);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
	}
	.green:active {
		color: #a9c08c;
		background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
		background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
	}
	/* pink */
	.pink {
		color: #feeef5;
		border: solid 1px #d2729e;
		background: #f895c2;
		background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
		background: -moz-linear-gradient(top, #feb1d3, #f171ab);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
	}
	.pink:hover {
		background: #d57ea5;
		background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
		background: -moz-linear-gradient(top, #f4aacb, #e86ca4);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
	}
	.pink:active {
		color: #f3c3d9;
		background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
		background: -moz-linear-gradient(top, #f171ab, #feb1d3);
	 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
	}
	
		
/* progress bar css */
.volumeBar {
	margin: .5em;
}
.volumePercent {
	height: 20px;
}
.progressBar {
	top:6px;
	width: 15%;
	display:-moz-inline-stack;
	display:inline-block;
  	*display:inline;
	vertical-align:top;
	zoom:1;
}
	.buffer {
		height: 100%;
		position: absolute;
		*position: relative;
		background-color: #ddd;
		display:-moz-inline-stack;
		display:inline-block;
		*display:inline;
		vertical-align:top;
		zoom:1;
	}
	.audioLoading {
		background: url("./../progress-bar-loader.gif");
	}

/* Component containers
----------------------------------*/
.ui-widget-content { background-color: #eeeeee/*{bgColorContent}*/; color: #222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
.ui-widget-header { background-color: #3B5998/*{bgColorHeader}*/; color: #222222/*{fcHeader}*/; }
.ui-widget-header a { color: #222222/*{fcHeader}*/; }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {background-color: #e6e6e6/*{bgColorDefault}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555/*{fcDefault}*/; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { background-color: #dadada/*{bgColorHover}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcHover}*/; }
.ui-state-hover a, .ui-state-hover a:hover { color: #212121/*{fcHover}*/; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {background-color: #ffffff/*{bgColorActive}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121/*{fcActive}*/; text-decoration: none; }
.ui-widget :active { outline: none; }
.ui-state-disabled { cursor: default !important; }

/* slider */
.ui-slider { position: relative; text-align: left; cursor: pointer;}
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: pointer; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
.ui-slider .ui-slider-handle { width: 19px; height:19px; background-position:-305px -126px; background-color:transparent;}
.ui-slider .ui-state-hover { background-position:-324px -126px; }
.ui-slider .ui-state-active { background-position:-342px -126px; }

.ui-slider-horizontal { height: 12px; }
.ui-slider-horizontal .ui-slider-handle { top: -.4em; margin-left: -.3em !important; *top:-4px; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: 12px; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.5em; *margin-left: -.3em !important; margin-bottom: -.6em !important; *left:-.8em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }


/* quran signs */
.sign {
	font-family: me_quran,meQuran,Times New Roman;
	color: #FB7600;
	/* font-size: 0.9em; TODO*/
	font-size: 70%;
}

.internal-sign {
	font-family: me_quran,meQuran,Times New Roman;
	color: green;
	/* font-size: 0.65em; TODO*/
	font-size: 70%;
}

.juz-sign {
	width: 16px;
	height: 16px;
	background-position: 0 -80px;/* TODO juz sign in images */
	display: inline-block;
	vertical-align: middle;
	margin-top: 3px;
}

/* tajweed colors */
.ghn {
    color: #FF7E1E;
}
.color.ghn {
	background-color: #FF7E1E;
}
.qlq {
    color: #DD0008;
}
.color.qlq
{
	background-color: #DD0008;
}
.qlq:hover {
    background-color: #F3A6A9;
    color: #DD0008;
    cursor: pointer;
}
.idgh_ghn {
    color: #169200;
}
.color.idgh_ghn
{
	background-color: #169200;
}
.idgh_ghn:hover {
    background-color: #9CE58E;
    color: #169200;
    cursor: pointer;
}
.idgh_w_ghn {
    color: #169200;
}
.color.idgh_w_ghn
{
	background-color: #169200;
}
.idgh_w_ghn:hover {
    background-color: #9CE58E;
    color: #169200;
    cursor: pointer;
}
.iqlb {
    color: #26BFFD;
}
.color.iqlb
{
	background-color: #26BFFD;
}
.iqlb:hover {
    background-color: #92E5FF;
    color: #0099C5;
    cursor: pointer;
}
.ikhf {
    color: #9400A8;
}
.color.ikhf
{
	background-color: #9400A8;
}
.ikhf:hover {
    background-color: #DAA6E1;
    color: #9400A8;
    cursor: pointer;
}
.ikhf_shfw {
    color: #D500B7;
}
.color.ikhf_shfw
{
	background-color: #D500B7;
}
.ikhf_shfw:hover {
    background-color: #F0A6E6;
    color: #D500B7;
    cursor: pointer;
}
.idghm_shfw {
    color: #58B800;
}
.color.idghm_shfw
{
	background-color: #58B800;
}
.idghm_shfw:hover {
    background-color: #BAE890;
    color: #58B800;
    cursor: pointer;
}
.slnt {
    color: #AAAAAA;
}
.color.slnt
{
	background-color: #AAAAAA;
}
.ham_wasl {
    color: #AAAAAA;
}
.color.ham_wasl
{
	background-color: #AAAAAA;
}
.ham_wasl:hover {
    background-color: #D7D7D7;
}
.madda_necessary {
    color: #000EBC;
}
.color.madda_necessary
{
	background-color: #000EBC;
}
.madda_obligatory {
    color: #2144C1;
}
.color.madda_obligatory
{
	background-color: #2144C1;
}
.madda_permissible {
    color: #4050FF;
}
.color.madda_permissible
{
	background-color: #4050FF;
}
.madda_normal {
    color: #537FFF;
}
.color.madda_normal
{
	background-color: #537FFF;
}
.idgh_mus {
    color: #A1A1A1;
}
.color.idgh_mus
{
	background-color: #A1A1A1;
}
.idgh_mus:hover {
    background-color: #D7D7D7;
}

/* kids word by word colors */
.wordColor1 {
	color:#006AFF;
}
.wordColor2 {
	color:#FFD800;
}
.wordColor3 {
	color:#129308;
}
.wordColor4 {
	color:#CE7706;
}
.wordColor5 {
	color:#C90404;
}
.wordColor6 {
	color:#CE0692;
}
.wordColor7 {
	color:#A624F2;
}
.wordColor8 {
	color:#6928E2;
}
.wordColor9 {
	color:#0428C9;
}
.wordColor10 {
	color:#04AFC9;
}


/* required fonts */
@font-face {
    font-family: 'me_quran';
    src: url('./../../../fonts/me_quran-webfont.eot');
    src: url('./../../../fonts/me_quran-webfont.eot?#iefix') format('embedded-opentype'),
         url('./../../../fonts/me_quran-webfont.woff') format('woff'),
         url('./../../../fonts/me_quran-webfont.ttf') format('truetype'),
         url('./../../../fonts/me_quran-webfont.svg#mequranRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: '_PDMS_Saleem_QuranFont';
    src: url('./../../../fonts/pdms_saleem-webfont.eot');
    src: url('./../../../fonts/pdms_saleem-webfont.eot?#iefix') format('embedded-opentype'),
         url('./../../../fonts/pdms_saleem-webfont.woff') format('woff'),
         url('./../../../fonts/pdms_saleem-webfont.ttf') format('truetype'),
         url('./../../../fonts/pdms_saleem-webfont.svg#') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'KFGQPC Uthman Taha Naskh';
    src: url('./../../../fonts/kfc_naskh-webfont.eot');
    src: url('./../../../fonts/kfc_naskh-webfont.eot?#iefix') format('embedded-opentype'),
         url('./../../../fonts/kfc_naskh-webfont.woff') format('woff'),
         url('./../../../fonts/kfc_naskh-webfont.ttf') format('truetype'),
         url('./../../../fonts/kfc_naskh-webfont.svg#KFGQPCUthmanTahaNaskhRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Scheherazade';
    src: url('./../../../fonts/scheherazade-webfont.eot');
    src: url('./../../../fonts/scheherazade-webfont.eot?#iefix') format('embedded-opentype'),
         url('./../../../fonts/scheherazade-webfont.woff') format('woff'),
         url('./../../../fonts/scheherazade-webfont.ttf') format('truetype'),
         url('./../../../fonts/scheherazade-webfont.svg#ScheherazadeRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'XB Zar';
    src: url('./../../../fonts/xb_zar-webfont.eot');
    src: url('./../../../fonts/xb_zar-webfont.eot?#iefix') format('embedded-opentype'),
         url('./../../../fonts/xb_zar-webfont.woff') format('woff'),
         url('./../../../fonts/xb_zar-webfont.ttf') format('truetype'),
         url('./../../../fonts/xb_zar-webfont.svg#XBZarRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*
* qTip2 - Pretty powerful tooltips
* http://craigsworks.com/projects/qtip2/
*
* Version: nightly
* Copyright 2009-2010 Craig Michael Thompson - http://craigsworks.com
*
* Dual licensed under MIT or GPLv2 licenses
*   http://en.wikipedia.org/wiki/MIT_License
*   http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Tue Sep 13 17:04:02.0000000000 2011
*/
/* Core qTip styles */
.ui-tooltip, .qtip{
	position: absolute;
	left: -28000px;
	top: -28000px;
	display: none;

	max-width: 280px;
	min-width: 50px;
	
	font-size: 10.5px;
	line-height: 12px;

	z-index: 15000;
}

	/* Fluid class for determining actual width in IE */
	.ui-tooltip-fluid{
		display: block;
		visibility: hidden;
		position: static !important;
		float: left !important;
	}

	.ui-tooltip-content{
		position: relative;
		padding: 5px 9px;
		overflow: hidden;
		
		border-width: 1px;
		border-style: solid;
		
		text-align: left;
		word-wrap: break-word;
		overflow: hidden;
	}

	.ui-tooltip-titlebar{
		position: relative;
		min-height: 14px;
		padding: 5px 35px 5px 10px;
		overflow: hidden;
		
		border-width: 1px 1px 0;
		border-style: solid;

		font-weight: bold;
	}

	.ui-tooltip-titlebar + .ui-tooltip-content{ border-top-width: 0px !important; }

		/*! Default close button class */
		.ui-tooltip-titlebar .ui-state-default{
			position: absolute;
			right: 4px;
			top: 50%;
			margin-top: -9px;

			cursor: pointer;
			outline: medium none;

			border-width: 1px;
			border-style: solid;
		}
		
		* html .ui-tooltip-titlebar .ui-state-default{ top: 16px; } /* IE fix */

		.ui-tooltip-titlebar .ui-icon,
		.ui-tooltip-icon .ui-icon{
			display: block;
			text-indent: -1000em;
		}

		.ui-tooltip-icon, .ui-tooltip-icon .ui-icon{
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			border-radius: 3px;
		}

			.ui-tooltip-icon .ui-icon{
				width: 18px;
				height: 14px;

				text-align: center;
				text-indent: 0;
				font: normal bold 10px/13px Tahoma,sans-serif;

				color: inherit;
				background: transparent none no-repeat -100em -100em;
			}


/* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
.ui-tooltip-focus{

}

/* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */
.ui-tooltip-hover{
	
}


/*! Default tooltip style */
.ui-tooltip-default .ui-tooltip-titlebar,
.ui-tooltip-default .ui-tooltip-content{
	border-color: #F1D031;
	background-color: #FFFFA3;
	color: #555;
}

	.ui-tooltip-default .ui-tooltip-titlebar{
		background-color: #FFEF93;
	}

	.ui-tooltip-default .ui-tooltip-icon{
		border-color: #CCC;
		background: #F1F1F1;
		color: #777;
	}
	
	.ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover{
		border-color: #AAA;
		color: #111;
	}

/* Tips plugin */
.ui-tooltip .ui-tooltip-tip{
	margin: 0 auto;
	overflow: hidden;

	background: transparent !important;
	border: 0px dashed transparent !important;
	z-index: 10;
}

	.ui-tooltip .ui-tooltip-tip,
	.ui-tooltip .ui-tooltip-tip *{
		position: absolute;
		
		line-height: 0.1px !important;
		font-size: 0.1px !important;
		color: #123456;

		background: transparent;
		border: 0px dashed transparent;
	}
	
	.ui-tooltip .ui-tooltip-tip canvas{ top: 0; left: 0; }


/* Modal plugin */
#qtip-overlay{
	position: fixed;
	left: -10000em;
	top: -10000em;
}

	/* Applied to modals with show.modal.blur set to true */
	#qtip-overlay.blurs{ cursor: pointer; }

	/* Change opacity of overlay here */
	#qtip-overlay div{
		position: absolute;
		left: 0; top: 0;
		width: 100%; height: 100%;

		background-color: black;

		opacity: 0.7;
		filter:alpha(opacity=70);
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	}

/*! WordbyWord tooltip style */
.ui-tooltip-word {
	font-size:225%;
	max-width:none;
	line-height: 1.5em;
	white-space:nowrap;
}
.ui-tooltip-word .ui-tooltip-titlebar,
.ui-tooltip-word .ui-tooltip-content{
	border-width: 3px;
	border-color: #3B5998;
	color: #454545;
}

	.ui-tooltip-word .ui-tooltip-content{
		background-color: white;
	}

	.ui-tooltip-word .ui-tooltip-titlebar{
		background-color: #f1f1f1;
	}
	
/*! Light tooltip style */
.ui-tooltip-light .ui-tooltip-titlebar,
.ui-tooltip-light .ui-tooltip-content{
	border-color: #E2E2E2;
	color: #454545;
}

	.ui-tooltip-light .ui-tooltip-content{
		background-color: white;
	}

	.ui-tooltip-light .ui-tooltip-titlebar{
		background-color: #f1f1f1;
	}


/*! Dark tooltip style */
.ui-tooltip-dark .ui-tooltip-titlebar,
.ui-tooltip-dark .ui-tooltip-content{
	border-color: #303030;
	color: #f3f3f3;
}

	.ui-tooltip-dark .ui-tooltip-content{
		background-color: #505050;
	}

	.ui-tooltip-dark .ui-tooltip-titlebar{
		background-color: #404040;
	}

	.ui-tooltip-dark .ui-tooltip-icon{
		border-color: #444;
	}

	.ui-tooltip-dark .ui-tooltip-titlebar .ui-state-hover{
		border-color: #303030;
	}


/*! Cream tooltip style */
.ui-tooltip-cream .ui-tooltip-titlebar,
.ui-tooltip-cream .ui-tooltip-content{
	border-color: #F9E98E;
	color: #A27D35;
}

	.ui-tooltip-cream .ui-tooltip-content{
		background-color: #FBF7AA;
	}

	.ui-tooltip-cream .ui-tooltip-titlebar{
		background-color: #F0DE7D;
	}

	.ui-tooltip-cream .ui-state-default .ui-tooltip-icon{
		background-position: -82px 0;
	}


/*! Red tooltip style */
.ui-tooltip-red .ui-tooltip-titlebar,
.ui-tooltip-red .ui-tooltip-content{
	border-color: #D95252;
	color: #912323;
}

	.ui-tooltip-red .ui-tooltip-content{
		background-color: #F78B83;
	}

	.ui-tooltip-red .ui-tooltip-titlebar{
		background-color: #F06D65;
	}

	.ui-tooltip-red .ui-state-default .ui-tooltip-icon{
		background-position: -102px 0;
	}

	.ui-tooltip-red .ui-tooltip-icon{
		border-color: #D95252;
	}

	.ui-tooltip-red .ui-tooltip-titlebar .ui-state-hover{
		border-color: #D95252;
	}


/*! Green tooltip style */
.ui-tooltip-green .ui-tooltip-titlebar,
.ui-tooltip-green .ui-tooltip-content{
	border-color: #90D93F;
	color: #3F6219;
}

	.ui-tooltip-green .ui-tooltip-content{
		background-color: #CAED9E;
	}

	.ui-tooltip-green .ui-tooltip-titlebar{
		background-color: #B0DE78;
	}

	.ui-tooltip-green .ui-state-default .ui-tooltip-icon{
		background-position: -42px 0;
	}


/*! Blue tooltip style */
.ui-tooltip-blue .ui-tooltip-titlebar,
.ui-tooltip-blue .ui-tooltip-content{
	border-color: #ADD9ED;
	color: #5E99BD;
}

	.ui-tooltip-blue .ui-tooltip-content{
		background-color: #E5F6FE;
	}

	.ui-tooltip-blue .ui-tooltip-titlebar{
		background-color: #D0E9F5;
	}

	.ui-tooltip-blue .ui-state-default .ui-tooltip-icon{
		background-position: -2px 0;
	}

/*! Add shadows to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE6+, Safari 2+ */
.ui-tooltip-shadow{
	-webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
	box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

	.ui-tooltip-shadow .ui-tooltip-titlebar,
	.ui-tooltip-shadow .ui-tooltip-content{
		filter: progid:DXImageTransform.Microsoft.Shadow(Color='gray', Direction=135, Strength=3);
		-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Color='gray', Direction=135, Strength=3)";

		_margin-bottom: -3px; /* IE6 */
		.margin-bottom: -3px; /* IE7 */
	}


/*! Add rounded corners to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
.ui-tooltip-rounded,
.ui-tooltip-rounded .ui-tooltip-content,
.ui-tooltip-tipsy,
.ui-tooltip-tipsy .ui-tooltip-content,
.ui-tooltip-youtube,
.ui-tooltip-youtube .ui-tooltip-content{
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.ui-tooltip-rounded .ui-tooltip-titlebar,
.ui-tooltip-tipsy .ui-tooltip-titlebar,
.ui-tooltip-youtube .ui-tooltip-titlebar{
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

.ui-tooltip-rounded .ui-tooltip-titlebar + .ui-tooltip-content,
.ui-tooltip-tipsy .ui-tooltip-titlebar + .ui-tooltip-content,
.ui-tooltip-youtube .ui-tooltip-titlebar + .ui-tooltip-content{
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}


/*! Youtube tooltip style */
.ui-tooltip-youtube{
	-webkit-box-shadow: 0 0 3px #333;
	-moz-box-shadow: 0 0 3px #333;
	box-shadow: 0 0 3px #333;
}

	.ui-tooltip-youtube .ui-tooltip-titlebar,
	.ui-tooltip-youtube .ui-tooltip-content{
		_margin-bottom: 0; /* IE6 */
		.margin-bottom: 0; /* IE7 */

		background: transparent;
		background: rgba(0, 0, 0, 0.85);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000)";

		color: white;
		border-color: #CCCCCC;
	}

	.ui-tooltip-youtube .ui-tooltip-icon{
		border-color: #222;
	}

	.ui-tooltip-youtube .ui-tooltip-titlebar .ui-state-hover{
		border-color: #303030;
	}


/* jQuery TOOLS Tooltip style */
.ui-tooltip-jtools{
	background: #232323;
	background: rgba(0, 0, 0, 0.7);
	background-image: -moz-linear-gradient(top, #717171, #232323);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323));
	
	border: 2px solid #ddd;
	border: 2px solid rgba(241,241,241,1);

	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;

	-webkit-box-shadow: 0 0 12px #333;
	-moz-box-shadow: 0 0 12px #333;
	box-shadow: 0 0 12px #333;
}

	/* IE Specific */
	.ui-tooltip-jtools .ui-tooltip-titlebar{
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)";
	}
	.ui-tooltip-jtools .ui-tooltip-content{
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)";
	}

	.ui-tooltip-jtools .ui-tooltip-titlebar,
	.ui-tooltip-jtools .ui-tooltip-content{
		background: transparent;
		color: white;
		border: 0 dashed transparent;
	}

	.ui-tooltip-jtools .ui-tooltip-icon{
		border-color: #555;
	}

	.ui-tooltip-jtools .ui-tooltip-titlebar .ui-state-hover{
		border-color: #333;
	}


/* Cluetip style */
.ui-tooltip-cluetip{
	-webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
}

	.ui-tooltip-cluetip .ui-tooltip-titlebar{
		background-color: #87876A;
		color: white;
		border: 0 dashed transparent;
	}

	.ui-tooltip-cluetip .ui-tooltip-content{
		background-color: #D9D9C2;
		color: #111;
		border: 0 dashed transparent;
	}
	
	.ui-tooltip-cluetip .ui-tooltip-icon{
		border-color: #808064;
	}
	
	.ui-tooltip-cluetip .ui-tooltip-titlebar .ui-state-hover{
		border-color: #696952;
		color: #696952;
	}


/* Tipsy style */
.ui-tooltip-tipsy{
	border: 0;
}

	.ui-tooltip-tipsy .ui-tooltip-titlebar,
	.ui-tooltip-tipsy .ui-tooltip-content{
		_margin-bottom: 0; /* IE6 */
		.margin-bottom: 0; /* IE7 */

		background: transparent;
		background: rgba(0, 0, 0, .87);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000)";
		
		color: white;
		border: 0px transparent;

		font-size: 11px;
		font-family: 'Lucida Grande', sans-serif;
		font-weight: bold;
		line-height: 16px;
		text-shadow: 0 1px black;
	}

	.ui-tooltip-tipsy .ui-tooltip-titlebar{
		padding: 6px 35px 0 10;
	}

	.ui-tooltip-tipsy .ui-tooltip-content{
		padding: 6px 10;
	}
	
	.ui-tooltip-tipsy .ui-tooltip-icon{
		border-color: #222;
		text-shadow: none;
	}

	.ui-tooltip-tipsy .ui-tooltip-titlebar .ui-state-hover{
		border-color: #303030;
	}


/* Tipped style */
.ui-tooltip-tipped{

}
	
	.ui-tooltip-tipped .ui-tooltip-titlebar,
	.ui-tooltip-tipped .ui-tooltip-content{
		border: 3px solid #959FA9;

		filter: none; -ms-filter: none;
	}

	.ui-tooltip-tipped .ui-tooltip-titlebar{
		background: #3A79B8;
		background-image: -moz-linear-gradient(top, #3A79B8, #2E629D);
		background-image: -webkit-gradient(linear, left top, left bottom, from(#3A79B8), to(#2E629D));
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)";

		color: white;
		font-weight: normal;
		font-family: serif;

		border-bottom-width: 0;
		-moz-border-radius: 3px 3px 0 0;
		-webkit-border-radius: 3px 3px 0 0;
		border-radius: 3px 3px 0 0;
	}
	
	.ui-tooltip-tipped .ui-tooltip-content{
		background-color: #F9F9F9;
		color: #454545;

		-moz-border-radius: 0 0 3px 3px;
		-webkit-border-radius: 0 0 3px 3px;
		border-radius: 0 0 3px 3px;
	}

	.ui-tooltip-tipped .ui-tooltip-icon{
		border: 2px solid #285589;
		background: #285589;
	}
		
		.ui-tooltip-tipped .ui-tooltip-icon .ui-icon{
			background-color: #FBFBFB;
			color: #555;
		}

/* IE9 fix - removes all filters */
.ui-tooltip:not(.ie9haxors) div.ui-tooltip-content,
.ui-tooltip:not(.ie9haxors) div.ui-tooltip-titlebar{
	filter: none;
	-ms-filter: none;
}